<template>
  <div class="about">
    <h1>About</h1>
    <el-header>Header Content</el-header>
    <el-main>Main Content</el-main>
    <el-footer>Footer Content</el-footer>
    <el-button @click="handleClick">Click Me</el-button>
    <el-button>
      <NuxtLink to="/">Go to Index</NuxtLink>
    </el-button>
    <div>
      <p>Current Route: {{ currentRoute }}</p>
      <p>Route Params: {{ routeParams }}</p>
      <p>Query ID: {{ queryId }}</p>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue';
import { ElHeader, ElMain, ElFooter, ElButton } from 'element-plus';
import { useRoute } from 'vue-router';

const route = useRoute();
const currentRoute = ref(route.fullPath);
const routeParams = ref(route.params);

// 使用 computed 来动态获取 query 参数
const queryId = computed(() => route.query.id);

const handleClick = () => {
  console.log("Button clicked");
};

const showRoute = () => {
  console.log("Current Route:", currentRoute.value);
  console.log("Route Params:", routeParams.value);
  console.log("route:", route);
  console.log("Query ID:", queryId.value);
}

onMounted(() => {
  showRoute();
});
</script>

<style scoped>
.about {
  text-align: center;
  padding: 20px;
}

el-header, el-main, el-footer {
  margin: 10px 0;
}

el-button {
  margin: 10px 0;
}
</style>